<template>
	<!-- 安全中心 -->
	<view class="header">
		<u-navbar :border-bottom="false" title="安全中心	" title-size="32" title-width="500"></u-navbar>
		<view class="card">
			<view class="info">
				<view class="flex flex-jc-sb main" @click="goPage('/pages_system/changemobile/changemobile')">
					<view>更换手机号</view>
					<view>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
				<view class="flex flex-jc-sb main" @click="goPage('/pages_system/modifypassword/modifypassword')">
					<view>修改密码</view>
					<view>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
        <!-- #ifdef APP-PLUS -->
				<view class="flex flex-jc-sb main" @click="goPage('/pages_system/accountBinding/accountBinding')">
					<view>账号绑定</view>
					<view>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
         <!-- #endif -->
			</view>
			<view class="info flex flex-jc-sb" @click="isShow = true">
				<view>注销账户</view>
				<view>
					<text class="font-28 color-999 mr-15">注销后将无法恢复</text>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
		</view>
		<u-modal v-model="isShow" :show-title="false" :mask-close-able="true" :show-confirm-button="false">
			<view class="model">
				<view class="model-title">温馨提示	</view>
				<view class="model-title-main">
					你确定要注销账号吗
				</view>
				<view class="model-btn flex flex-jc-c">
					<view class="model-btn-cancel" @click="isShow = false">取消</view>
					<view class="model-btn-confirm" @click="cancellation">确定</view>
				</view>
			</view>
		</u-modal>
		<!-- <u-modal v-model="isShow" :show-cancel-button="true" title="" @confirm="cancellation" confirm-color="#FBD220">
			<view  class="flex flex-jc-c" style="line-height: 100rpx;">你确定要注销账号吗？</view>
		</u-modal> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
			}
		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},

			//注销账号
			cancellation() {
				uni.removeStorageSync('invitationcode')
				uni.removeStorageSync('addressList')
				// 登录信息-清除vuex
				this.$store.commit('setModel', null)
				//token存储-清除缓存
				uni.removeStorageSync('token')
				
				// 用户信息-清除缓存
				uni.setStorage({
				  key: 'launchFlag',
				  data: false,
				})
				//清除身份认证
				uni.setStorage({
				  key: 'idcards',
				  data: false,
				})
				
				this.tim.logout().then(imResponse => {
				}).catch(imError => {
				})
				this.$store.commit('isSDKReady', false)
				uni.removeStorage({
				  key: 'Ztc_C_USER_INFO',
				  success: function (res) {
				    uni.redirectTo({
				      url: '/pages_logins/login/login'
				    })
				  }
				})
				this.$refs.uToast.show({
					title: '注销成功',
					type: 'success '
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background-color: rgb(246, 246, 246);
		height: 100vh;

		.info {
			margin: 20rpx auto;
			padding: 0 24rpx;
			width: 702rpx;
			line-height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
			border-radius: 10rpx;

			.main {
				border-bottom: 2rpx solid #F6F6F6;
			}
		}
	}
	.model{
		
		.model-title{
			margin: 54rpx 0 39rpx 0;
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
		}
		.model-title-main{
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			text-align: center;
		}
		&-btn{
			margin:  54rpx 0 47rpx 0;
			
			&-cancel{
				text-align: center;
				width: 260rpx;
				height: 88rpx;
				background: #3D3D3D;
				border-radius: 44rpx 0px 0px 44rpx;
				line-height: 88rpx;
				color: #FFE23E;
				font-size: 30rpx;
			}
			
			&-confirm{
				text-align: center;
				width: 260rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: linear-gradient(0deg, #FBD220, #FFE23E);
				border-radius: 0px 44rpx 44rpx 0px;
				color: #333333;
				font-size: 30rpx;
			}
		}
	}
</style>
